﻿@model PilotProject.TestEngine

@{
    Layout = "~/Views/Shared/_AdminLayout.cshtml";   
}

<script type="text/javascript">
    $(function () {
        $("#sliderTime").slider({
            range: "max",
            min: 0,
            max: 180,
            value: "@Model.DurationInMinutes",
            step: 10,
            slide: function (event, ui) {
                $("#duration").val(ui.value);
                $("#DurationInMinutes").val(ui.value);
            }
        });
        $("#duration").val($("#sliderTime").slider("value"));
        $(".wide-handle .slider-range-max").css("width", "100px");
    });


    $(function () {
        $("#sliderNumberofQuestions").slider(
        {
            range: "max",
            min: 1,
            max: "@Model.Questions.Where(q => q.IsActive).Count()",
            value: "@Model.NumberOfQuestions",
            step: 1,
            slide: function (event, ui) {
                $("#questionsAmount").val(ui.value);
                $("#NumberOfQuestions").val(ui.value); 
            }
        });

        $("#questionsAmount").val($("#sliderNumberofQuestions").slider("value"));
        $(".wide-handle .slider-range-max").css("width", "100px");
    });


    $(function () {
        $("#sliderPassMark").slider({
            range: "max",
            min: 1,
            max: 100,
            value: $("#PassmarkAsPercentage").val(),
            step: 1,
            slide: function (event, ui) {
                $("#amount").val(ui.value);
                $("#PassmarkAsPercentage").val(ui.value); 
            }
        });
        $("#amount").val($("#sliderPassMark").slider("value"));
        $(".wide-handle .slider-range-max").css("width", "100px");
    });

</script>


 <style type="text/css">
       .slider { width:300px; };
       #demo-frame > div.demo { padding: 5px !important; };
    </style>

@using (Html.BeginForm())
{
    @Html.ValidationSummary(true)

    <div id="engine">
      

        @*@Html.DisplayFor(modelItem => modelItem.TestEngineDescription)*@
        @Html.HiddenFor(m => m.PassmarkAsPercentage) 
        @Html.HiddenFor(m => m.NumberOfQuestions)
        @Html.HiddenFor(m => m.DurationInMinutes)        
        @Html.HiddenFor(modelItem => modelItem.TestEngineDescription)
        @Html.HiddenFor(model => model.Id)


<div style="border:3px solid #b7ddf2;">  
    <div class="demo" style="margin-left:20px;">        
	    <p><label for="amount">Set pass mark in % </label>
         <span><input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold; width:50px;" /></span></p>
        <div id="sliderPassMark" class="slider"></div>           
      </div>
</div>


<div style="border:3px solid #b7ddf2;margin-top:10px;">  
    <div class="demo" style="margin-left:20px;">        
	    <p><label for="questionsAmount">Set Number of Questions </label>
         <span><input type="text" id="questionsAmount" style="border:0; color:#f6931f; font-weight:bold; width:50px;" /></span></p>
        <div id="sliderNumberofQuestions" class="slider"> </div>
        
        <div style="margin-top:18px;">
       <p><span style="color:Blue;">There are currently <span style="color:Red;">@ViewBag.Questions</span> active questions available in the database</span>.</p></div>
 </div>   
    </div>

<div style="border:3px solid #b7ddf2;margin-top:10px;">  
    <div class="demo" style="margin-left:20px;">  	        
        <p><label for="duration">Set Duration in minutes </label>  
        <span><input type="text" id="duration" style="border:0; color:#f6931f; font-weight:bold; width:50px;" /></span> </p>      
        <div id="sliderTime" class="slider"></div>
    </div>
 </div>   
   <div style="margin-top:10px;">
    <p><input type="submit" id="submit" value="Save" class="quizb" /></p>
    </div>

   <div style="margin-top:10px;">   
    <p>@Html.ActionLink("Back to List", "Index")</p>
    </div>
   </div>
}






